<template>
  <div class="layout">
    <Layout>
      <Header>
        <div class="layout-logo">
         <h2>怡乐购平台管理</h2>
        </div>
        <div class="layout-nav">
          <span style="display: inline-block;cursor: pointer">{{user.name}} 退出</span>
          <span style="display: inline-block;cursor: pointer" @click="modal=true">修改密码</span>
        </div>
      </Header>
      <Layout >
        <Sider hide-trigger :width="260" :style="{background: '#fff',borderRight: '2px solid #ddd', minHeight: screenHeight+'px'}">
          <Menu  @on-select="handleSelect"  style="text-align: left" active-name="1-2" theme="light" width="auto" :open-names="['1']">
            <Submenu name="1">
              <template slot="title">
                <Icon type="earth"></Icon>
                首頁
              </template>
              <MenuItem name="/demo">demo</MenuItem>
            </Submenu>
            <Submenu name="2">
              <template slot="title">
                <Icon type="bag"></Icon>
                产品
              </template>
              <MenuItem name="/products">产品管理</MenuItem>
              <MenuItem name="/product">新增产品</MenuItem>
              <MenuItem name="/category">类目管理</MenuItem>
              <MenuItem name="/brand">品牌管理</MenuItem>
            </Submenu>
            <Submenu name="3">
              <template slot="title">
                <Icon type="ios-list"></Icon>
                店铺
              </template>
              <MenuItem name="/shops">店铺管理 </MenuItem>
              <MenuItem name="/shop">新增店铺</MenuItem>
            </Submenu>
            <Submenu name="4">
              <template slot="title">
                <Icon type="podium"></Icon>
                运营
              </template>
              <MenuItem name="/demo">广告位</MenuItem>
            </Submenu>
            <Submenu name="5">
              <template slot="title">
                <Icon type="person-stalker"></Icon>
                用户
              </template>
              <MenuItem name="/account">账号管理</MenuItem>
            </Submenu>
          </Menu>
        </Sider>
        <Layout :style="{padding: '0 24px 24px'}">
          <Breadcrumb style="text-align: left;margin: 24px">
            <BreadcrumbItem v-for="b in breadcrumb" :key="b.name">{{b.name}}</BreadcrumbItem>
          </Breadcrumb>
          <Content :style="{background: '#fff'}" class="card">
            <router-view/>
          </Content>
        </Layout>
      </Layout>
    </Layout>

    <Modal
      v-model="modal"
      width="300"
      class-name="vertical-center-modal"
      title="修改密码">
      <Form ref="formValidate" :label-width="50">
        <FormItem label="原密码">
          <Input v-model="user.oldPassword" placeholder="原密码"></Input>
        </FormItem>
        <FormItem  label="密码" >
          <Input v-model="user.password" placeholder="新密码"></Input>
        </FormItem>
        <FormItem label="新密码">
          <Input v-model="user.password1" placeholder="重复新密码"></Input>
        </FormItem>
        <p style="color: red" v-text="msg"></p>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="modal = false">取消</Button>
        <Button type="primary" size="large" @click="changePwdAction">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {changeCurrentUserPwd, getCurrentUser} from '../api/account/accountApi'
export default {
  data () {
    return {
      modal: false,
      msg: '',
      user: {
        name: '',
        oldPassword: '',
        password: '',
        password1: ''
      },
      screenHeight: 0,
      breadcrumb: [{name: '首页'}]
    }
  },
  mounted () {
    this.screenHeight = window.innerHeight - 66
    window.onresize = () => {
      return (() => {
        this.screenHeight = window.innerHeight - 66
      })()
    }
    getCurrentUser(user => {
      this.user.name = user.name
    })
  },
  methods: {
    handleSelect (name) {
      this.$router.push(name)
    },
    changePwdAction () {
      if (this.user.password !== this.user.password1) {
        this.msg = '两次输入密码不一致!'
      } else {
        this.msg = ''
        changeCurrentUserPwd({
          password: this.user.password,
          oldPwd: this.user.oldPassword
        }, res => {
          this.modal =
          this.$Message.info(res)
        }, _ => this.$Message.error('系统出错'))
      }
    }
  },
  watch: {
    '$route' (to) {
      if (to.meta.breadcrumb) {
        this.breadcrumb = to.meta.breadcrumb.map(name => ({name}))
      }
    }
  }

}
</script>

<style lang="less" >
  @import "../assets/less/index.less";
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
  .layout-logo{
    border-radius: 3px;
    float: left;
    position: relative;
    left: 20px;
    color: #fff;
  }
  .layout-nav{
    width: 150px;
    margin: 0 auto;
    margin-right: 0px;
    color: #fff;
  }
  .ivu-layout-header {
    background: #0B8DE5 !important;
    padding: 0 30px;
    height: 64px;
    line-height: 64px;
  }

  .vertical-center-modal{
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal{
      top: 0;
    }
  }
</style>
